<script setup lang="ts">
import {
  Pod,
  ReplicaSet,
  Volume,
  VolumeMountStatus
} from "@/views/domain/kubeHud/api/k8s/types";
import KContainer from "../../components/KContainer.vue";
import PodReplicas from "../widgets/PodReplicas.vue";
import PodContainerPorts from "../widgets/PodContainerPorts.vue";
import PodContainerStatusCardFlow from "../widgets/PodContainerStatusCardFlow.vue";
import PodContainerTable from "../widgets/PodContainerTable.vue";
import KSpace from "../../components/KSpace.vue";
import KVolumeRow from "../../components/KVolumeRow.vue";
import { onMounted, ref, watch } from "vue";

type Prop = {
  pod: Pod;
  replicaSet?: ReplicaSet;
};

const props = defineProps<Prop>();

type VolumeCompare = {
  volume?: Volume;
  mount?: VolumeMountStatus[];
};

const volumes = ref<{ [key: string]: VolumeCompare }>({});
const resetVolumes = () => {
  console.log("reset volume");
  volumes.value = {};

  props.pod.spec?.volumes.forEach(volume => {
    volumes.value[volume.name] = { volume, mount: [] };
  });

  props.pod.status?.containerStatuses?.forEach(status => {
    status.volumeMounts?.forEach(mount => {
      if (volumes.value[mount.name]) {
        volumes.value[mount.name].mount.push(mount);
      }
    });
  });
};

onMounted(() => {
  resetVolumes();
});

watch(
  () => props.pod,
  () => {
    resetVolumes();
  }
);
</script>

<template>
  <div class="info-status">
    <KContainer title="容器" fill>
      <pod-container-table :pod="pod" />
    </KContainer>

    <KContainer title="卷" fill>
      <KSpace direction="column" class="w-full" gap="10px">
        <KVolumeRow
          v-for="(volume, key) in volumes"
          :key="`${key}`"
          :volume="volume.volume"
          :mounts="volume.mount"
        />
      </KSpace>
    </KContainer>
  </div>
</template>
<style lang="scss" scoped>
.info-status {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
</style>
